<template>
    <section class="chore_detail">
        <div id="main">
 			<div id="mainContainer"  @drop='drop($event)' @dragover='allowDrop($event)'>
 				<p class="chore_detail_p">编辑区</p>
 				<div class="">
	 				<div  class="service_item" v-for="(item,index) in serviceItem" >
	 					{{item.name}}
	 					<img v-show="serviceItem.length!=1" v-if="index!=serviceItem.length-1" src="../../../../images/down.png"/>
	 				</div>
 				</div>
 			</div>
		</div>
		<div id="left">
		 	<div id="leftContainer" class="inner">
		 		<p class="chore_detail_p">可选择的服务资源</p>
		 		<div class="service_item mainContainer_hidden" 
		 			v-for="(item,index) in dragItem"
		 			draggable='true' 
		 			@dragstart='drag($event,item,index)' >
 					{{item.name}}
 				</div>
		 	</div>
		</div>
		<div id="right">
			<div id="rightContainer" class="inner">
				<p class="chore_detail_p">参数设置</p>
				<div class="chore_detail_div">
					<p class="chore_detail_title">输入参数</p>
					<p class="chore_input_p" v-for="item in choreInputp">
						<span class="chore_detail_span">参数名：<span class="chore_detail_val">{{item.name}}</span></span><span class="chore_detail_span">是否必填：<span class="chore_detail_val">{{item.isNecessary==1?'是':'否'}}</span></span>
					</p>
					<p class="chore_detail_title" style="margin-top: 20px;">输出参数(请选择)</p>
						<el-checkbox-group v-model="form.output" style="padding-left: 20px;" class="checkbox_diy">
					      <el-checkbox-button class="box_checkbox" :checked="item.show"  v-for="(item,index) in outputs" :label="item" :key="index">{{item.name}}</el-checkbox-button>
					    </el-checkbox-group>
				</div>
			</div>
		</div>
		
		<p class="step_p"> 
			<el-button type="warning" style="float: left;" @click="resetData">重置数据</el-button>
			<el-button type="primary"  style=" background-color: #2576C5;" @click="lastStep(0)" class="button_diy">上一步</el-button>
			<el-button type="primary" style=" background-color: #2576C5;" @click="nextStep(2)" class="button_diy">下一步</el-button>
			
		</p>
    </section>
</template>

<script>
    import {
    	computedGroupSearch,
    	computedDataSearch,
    	computedResourceDetail
    } from "../../css_js_img/computedSmartResource"
    
    import {
    	apiGetSmartResource
    } from "../../css_js_img/apiSmartResource"
    export default {
    	props:{
    		lastForm:Object,
    		choreDetailForm:Object
    	},
        data() {
          return {
          		type:'yilai',
          		dom:'',
          		item:{},
          		index:0,
          		form:{
          			output:[],
          			serviceItem:[],
          		},
          		dragItem:[
          			
          		],
          		outputs:[],
          		hasOutPut:[],
          		serviceItem:[],
          		choreInputp:[],
          		
          };
        },
        methods: {
        		lastStep(val){
        			this.$emit('nextStep',{val:0,form:[]});
        		},
        		nextStep(val){/*要做验证处理*/
        			if(this.form.output.length===0){
        				this.$message('请至少选择一个输出参数');
        			}else{
        				this.form.serviceItem = this.serviceItem;
        				this.$emit('nextStep',{val:2,form:this.form})
        			}
        		},
		        drag(ev,item,index){/*拖拽*/
		        	this.dom = ev.currentTarget
		        	this.item = item;
		        	this.index = index;
		        },
		        drop(ev){/*放下*/
		        	 ev.preventDefault();
		        	 if( this.serviceItem.length<2){
		        	 	 this.serviceItem.push(this.item);
			        	 this.dragItem.splice(this.index,1);
	//   				 event.target.appendChild(this.dom);
						 computedDataSearch(this);
		        	 }else{
		        	 	this.$message('最多只能俩条');
		        	 }
		        	
		        },
		        allowDrop(ev){/**/
		        	   ev.preventDefault();
		        },
		        resetData(){
		        	Object.assign(this.$data, this.$options.data())/*重置data数据*/
		        	computedGroupSearch(this);
		        	computedResourceDetail(this);
		        },
		        dealUpdata(newVal){
        				console.log(newVal)
//      				this.form.serviceItem.push
							apiGetSmartResource(
							 	'resource/service/'+newVal.smGroupResourceServices[0].resourceServiceId+'/detail'
							).then((res)=>{
							 	if(res.data.code==='S100101'){
							 		this.serviceItem.push(res.data.data)
							 	}
							})
	        	},
	        	dealDataSerch(){/*更新时候处理的数据*/
	        		if(this.choreDetailForm.smGroupOutputFieldViewVos!=''){
	        			let bridgeOutput =[];
	        			for (let i = 0; i < this.choreDetailForm.smGroupOutputFieldViewVos.length; i++) {
	        				this.choreDetailForm.smGroupOutputFieldViewVos[i]
	        				if(this.choreDetailForm.smGroupOutputFieldViewVos[i].position!=null){
	        					for (let k = 0; k < this.choreDetailForm.smGroupOutputFieldViewVos[i].smOutputDataForm.length; k++) {
	        						bridgeOutput.push(this.choreDetailForm.smGroupOutputFieldViewVos[i].smOutputDataForm[k])
	        						
	        					}
	        				}
	        			}
	        			if(this.outputs.length!=0){
	        				for (let i = 0; i < this.outputs.length; i++) {
	        					for (let k = 0; k < bridgeOutput.length; k++) {
	        						if(bridgeOutput[k].id==this.outputs[i].id){/*证明有选中这个*/
	        							this.outputs[i].show = true/*相当于赛数据进去了*/
	        						}
	        					}
	        					
	        				}
	        			}
	        		}
	        		
	        	}
		     
        },
        mounted(){
        	computedGroupSearch(this);
        	computedResourceDetail(this);
        },
        watch:{
        	lastForm:{
        		handler(newVal){
        			computedGroupSearch(this);
        			computedResourceDetail(this);
        		},
        		deep:true	
        	},
        }
  };
</script>

<style scoped="scoped">
	p.step_p {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #bbe5f954;
    width: 100%;
    text-align: right;
    padding: 10px 40px;
}
	p.chore_detail_title {
    padding-left: 20px;
    font-size: 13px;
    margin-bottom: 5px;
}
	span.chore_detail_span {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 14px;
    color: #9c9898;
}
	.service_item img {
	    position: absolute;
	    top: 48px;
	    left: 85px;
	    width: 35px;
	}
	#leftContainer .service_item{
		cursor:move;
	}
	
	.service_item {
	
    text-align: center;
    border: solid 1px #bfb9b9;
    width: 200px;
    margin: 15px auto;
    border-radius: 62px;
    padding: 15px;
    font-size: 14px;
    position: relative;
    top: 0px;
    left: 0;
}
#mainContainer .service_item{
		 margin: 28px auto;
		 cursor: pointer;
		 border: solid 1px #2576C5;
		 color: #2576C5;
	}
	
#mainContainer .mainContainer_hidden{
	display: none;
}
.chore_detail_p {
    font-size: 14px;
    padding: 15px;
    font-weight: 600;
}
.chore_detail{
	margin-top: 10px;
	background: #fff;
	box-sizing: border-box;
	height:700px;
    padding-bottom: 40px;
}
#main {
 float: left;
 width: 100%;
 height: 100%;
}
#mainContainer {
 margin: 0 460px 0 390px;
 height: 100%;
 overflow-y: scroll;
 /*background: green;*/
}
#left {
 float: left;
 margin-left: -100%;/*这个是一个页面的宽度*/
 width: 390px;
 height: 100%;
} 
#right {
 float: left;
 margin-left: -460px;/*这个是这个长度，因为在第三个左浮，所以就是负去自身宽度，就是刚好排到第三个。*/
 width: 460px;
  height: 100%;
} 
#left .inner,
#right .inner {
 /*background: orange;*/
 /*margin: 0 10px;*/
 height: 100%;
    overflow-y: scroll;
}
#left .inner{
	border-right: solid 1px #E0E0DD;
}
#right .inner{
	border-left: solid 1px #E0E0DD;
}
    .box_checkbox{
    	margin: 5px !important;
    	border-left: solid 1px #dcdfe6;
    }
    .box_checkbox .el-checkbox-button__inner{
    	border:  1px solid #dcdfe6;
    }
</style>